<template>
  <div class="calendar-wrapper">
    <div class="calendar-header">
      <div class="btn" @click="lastWeek">
        <img src="@/assets/icon_012.png" alt="" class="icon" />上周
      </div>
      <div class="title" v-if="title">{{ title }}</div>
      <div class="title" v-if="!title && num">第{{ num | toChinesNum }}周</div>
      <div class="btn" @click="nextWeek">
        下周<img src="@/assets/icon_013.png" alt="" class="icon" />
      </div>
    </div>
    <div class="calendar-body">
      <div
        class="calendar-item"
        v-for="(item, index) in calendarData"
        :key="item.label"
      >
        <div class="label">{{ item.label }}</div>
        <van-badge :content="item.badge">
          <div
            class="value"
            v-if="item.bg"
            :style="'background: ' + item.bg + ';color: #fff;'"
            @click="selectItem(item, index)"
          >
            {{ item.value }}
          </div>
          <div class="value" v-else>{{ item.value }}</div>
        </van-badge>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");

export default {
  name: "calendar",
  data() {
    return {
      //0是普通，1是边框颜色，2是背景色
      calendarData: [
        {
          label: "一",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "二",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "三",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "四",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "五",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "六",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
        {
          label: "日",
          value: "",
          bg: "",
          borderColor: "",
          badge: "",
          time: "",
        },
      ],
      title: "",
    };
  },
  props: {
    dayCount: {
      typeof: Array,
      required: true,
      default: () => [],
    },
    select: {
      typeof: Boolean,
      default: () => false,
    },
    num: {
      required: true,
      default: () => "",
    },
    thisWeek: {
      typeof: Boolean,
      default: () => true,
    },
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      const oneDayTime = 86400000;
      //离周一差几天
      let day = 0;
      let todayWeek = new Date().getDay();
      //   let todayDate = new Date().getDate();
      let todayTime = new Date().getTime();
      if (todayWeek == 0) {
        day = 6;
      } else {
        day = todayWeek - 1;
      }
      let startTime = todayTime - day * oneDayTime;
      this.title = "";
      for (let i = 0; i < 7; i++) {
        this.calendarData[i].value = new Date(
          startTime + i * oneDayTime
        ).getDate();
        this.calendarData[i].badge = "";
        this.calendarData[i].bg = "";
        this.calendarData[i].time = startTime + i * oneDayTime;
        if (todayTime == startTime + i * oneDayTime) {
          this.calendarData[i].bg = "#114659";
          if (this.thisWeek) {
            this.title = "本周";
          }
        }
      }
      this.$emit(
        "init",
        moment(this.calendarData[0].time).format("YYYY-MM-DD"),
        moment(this.calendarData[6].time).format("YYYY-MM-DD")
      );
    },
    selectItem(item, index) {
      let todayTime = new Date().getTime();
      if (item.badge && this.select) {
        if (this.calendarData[index].bg == "#ee0a24") {
          this.$emit(
            "init",
            moment(this.calendarData[0].time).format("YYYY-MM-DD"),
            moment(this.calendarData[6].time).format("YYYY-MM-DD")
          );
          if (
            moment(todayTime).format("YYYY-MM-DD") ==
            moment(this.calendarData[index].time).format("YYYY-MM-DD")
          ) {
            this.calendarData[index].bg = "#114659";
          } else {
            this.calendarData[index].bg = "#ff6011";
          }
        } else {
          let curIndex = this.calendarData.findIndex((item) => {
            return item.bg == "#ee0a24";
          });
          if (curIndex != -1) {
            if (
              moment(todayTime).format("YYYY-MM-DD") ==
              moment(this.calendarData[curIndex].time).format("YYYY-MM-DD")
            ) {
              this.calendarData[curIndex].bg = "#114659";
            } else {
              this.calendarData[curIndex].bg = "#ff6011";
            }
          }
          this.calendarData[index].bg = "#ee0a24";
          this.$emit(
            "select",
            moment(this.calendarData[0].time).format("YYYY-MM-DD"),
            moment(this.calendarData[6].time).format("YYYY-MM-DD"),
            moment(this.calendarData[index].time).format("YYYY-MM-DD")
          );
        }
      }
    },
    lastWeek() {
      this.title = "";
      const oneDayTime = 86400000;
      let todayTime = new Date().getTime();
      let startTime = this.calendarData[0].time - 7 * oneDayTime;
      for (let i = 0; i < 7; i++) {
        this.calendarData[i].value = new Date(
          startTime + i * oneDayTime
        ).getDate();
        this.calendarData[i].badge = "";
        this.calendarData[i].bg = "";
        this.calendarData[i].time = startTime + i * oneDayTime;
        if (
          moment(todayTime).format("YYYY-MM-DD") ==
          moment(startTime + i * oneDayTime).format("YYYY-MM-DD")
        ) {
          this.calendarData[i].bg = "#114659";
          if (this.thisWeek) {
            this.title = "本周";
          }
        }
      }
      this.$emit(
        "init",
        moment(this.calendarData[0].time).format("YYYY-MM-DD"),
        moment(this.calendarData[6].time).format("YYYY-MM-DD")
      );
    },
    nextWeek() {
      this.title = "";
      const oneDayTime = 86400000;
      let todayTime = new Date().getTime();
      let startTime = this.calendarData[6].time + oneDayTime;
      for (let i = 0; i < 7; i++) {
        this.calendarData[i].value = new Date(
          startTime + i * oneDayTime
        ).getDate();
        this.calendarData[i].badge = "";
        this.calendarData[i].bg = "";
        this.calendarData[i].time = startTime + i * oneDayTime;
        if (
          moment(todayTime).format("YYYY-MM-DD") ==
          moment(startTime + i * oneDayTime).format("YYYY-MM-DD")
        ) {
          this.calendarData[i].bg = "#114659";
          if (this.thisWeek) { 
            this.title = "本周";
          }
        }
      }
      this.$emit(
        "init",
        moment(this.calendarData[0].time).format("YYYY-MM-DD"),
        moment(this.calendarData[6].time).format("YYYY-MM-DD")
      );
    },
  },
  watch: {
    dayCount: {
      handler(newName) {
        for (let j = 0; j < newName.length; j++) {
          // console.log(newName[j].start_date);
          for (let i = 0; i < 7; i++) {
            if (
              moment(this.calendarData[i].time).format("YYYY-MM-DD") ==
              newName[j].start_date
            ) {
              if (
                this.calendarData[i].bg != "#114659" &&
                this.calendarData[i].bg != "#ee0a24"
              ) {
                this.calendarData[i].bg = "#ff6011";
              }
              this.calendarData[i].badge = this.dayCount[j].count1;
            }
          }
        }
      },
      immediate: true,
    },
  },
  filters: {
    toChinesNum(s_) {
      var _arrayCHNNum = [
        "〇",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      var _arrayCHNBit = ["", "十", "百", "千"];

      let _numArray = s_.toString().split("");
      if (_numArray.length === 2 && _numArray[0] === "1") {
        _numArray[0] = "y";
      }
      for (let i = _numArray.length - 1; i >= 0; i--) {
        if (_numArray[i] === "0") {
          _numArray[i] = "x";
        } else {
          break;
        }
      }
      let _s = "";
      let _bLast0 = false;
      for (let i = 0; i < _numArray.length; i++) {
        if (_numArray[i] === "x") {
          continue;
        }
        if (_numArray[i] === "0" && _bLast0) {
          _bLast0 = true;
          continue;
        }
        if (_numArray[i] !== "y") {
          //delete 1 in ten
          _s += _arrayCHNNum[parseInt(_numArray[i])];
        }
        if (_numArray[i] === "0") {
          _bLast0 = true;
          continue;
        }
        _bLast0 = false;

        _s += _arrayCHNBit[_numArray.length - i - 1];
      }
      console.log(_s);
      return _s;
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar-wrapper {
  background: #f9f9f9;
  padding: 0.266667rem 0.533333rem 0.373333rem;
  .calendar-header {
    height: 1.12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 0.24rem;
    .btn:last-of-type {
      .icon {
        width: 7px;
        height: 12px;
        margin-right: 0;
        margin-left: 3px;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      background: #f9f9f9;
      color: #999999;
      font-size: 14px;
      .icon {
        width: 7px;
        height: 12px;
        margin-right: 3px;
      }
    }

    .title {
      font-size: 18px;
      color: #333333;
    }
  }

  .calendar-body {
    display: flex;
    justify-content: space-between;
    .calendar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .label {
        font-size: 13px;
        color: #999999;
        line-height: 18px;
        margin-bottom: 0.373333rem;
      }

      .value {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
        font-size: 14px;
        color: #104558;
        // background: #104558;
      }
    }
  }
}
</style>